<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  <style>
    #app{
      display: grid;  
      /* 网格布局 */
      /* grid-template-rows: 1fr 1fr 1fr; */
      /*    数字是每一行的行高 几个fr是几行*/
      grid-template-columns: 1fr 1fr 1fr;
      /* 列数 */
      column-gap:5px ;
      /* 列间距 */
      grid-auto-rows: 10px;
      /* 行数自适应 */

      
    }
    .item{
      grid-row-start: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40px;
      border: 1px solid #999;
      border-radius: 3px;
      height: 100% !important; 

    }
    .item:first-child{
      grid-row-start: 1;
      grid-row-end:span 2 ;  
      /* 起始行网格刚开始的水平线从那里开始   结束行跨越两个 span 2 代表两等份*/
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="item" v-for="i in 9" :key="i" :style="setStyle(i)">{{i}}</div>
  </div>
  <script>
    const { createApp } =Vue
    createApp({
      data() {
        return {
          heights: [150, 160, 170, 180, 140, 155, 165, 180, 175],
          colors: [
            "#ef3429",
            "#f68f25",
            "#4ba846",
            "#0476c2",
            "#c077af",
            "#f8d29d",
            "#b4a87f",
            "#d0e4a8",
            "#4dc7ec"
          ]
        }
      },
      methods: {
        setStyle(index) {
          return {
            height: this.heights[index - 1] + 'px',
            background: this.colors[index - 1]
          }
        }
      }
    }).mount('#app')
  </script>
</body>

</html>